<template>
  <s-layout title="退货物流">
    <view>
      <form @submit="subRefund" report-submit="true">
        <view class="apply-return">
          <view class="list borRadius14">
            <view
              class="item acea-row row-between-wrapper"
              style="display: flex; align-items: center"
            >
              <view>物流公司</view>
              <view v-if="state.expresses.length > 0" style="flex: 1">
                <picker
                  mode="selector"
                  class="num"
                  @change="bindPickerChange"
                  :value="state.expressIndex"
                  :range="state.expresses"
                  range-key="name"
                >
                  <view
                    class="picker acea-row row-between-wrapper"
                    style="display: flex; justify-content: space-between"
                  >
                    <view class="reason">{{ state.expresses[state.expressIndex].name }}</view>
                    <text class="iconfont _icon-forward" />
                  </view>
                </picker>
              </view>
            </view>
            <view
              class="item textarea acea-row row-between"
              style="display: flex; align-items: center"
            >
              <view>物流单号</view>
              <input
                placeholder="请填写物流单号"
                class="num"
                name="logisticsNo"
                placeholder-class="placeholder"
              />
            </view>
            <button
              class="returnBnt bg-color ss-reset-button ui-BG-Main-Gradient sub-btn"
              form-type="submit"
              style="
                background: linear-gradient(
                  90deg,
                  var(--ui-BG-Main),
                  var(--ui-BG-Main-gradient)
                ) !important;
              "
              >提交</button
            >
          </view>
        </view>
      </form>
    </view>
  </s-layout>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  import sheep from '@/sheep';
  import AfterSaleApi from '@/sheep/api/trade/afterSale';
  import DeliveryApi from '@/sheep/api/trade/delivery';

  const state = reactive({
    id: 0, // 售后编号
    expressIndex: 0, // 选中的 expresses 下标
    expresses: [], // 可选的快递列表
  });

  function bindPickerChange(e) {
    state.expressIndex = e.detail.value;
  }

  async function subRefund(e) {
    let data = {
      id: state.id,
      logisticsId: state.expresses[state.expressIndex].id,
      logisticsNo: e.detail.value.logisticsNo,
    };
    const { code } = await AfterSaleApi.deliveryAfterSale(data);
    if (code !== 0) {
      return;
    }
    uni.showToast({
      title: '填写退货成功',
    });
    sheep.$router.go('/pages/order/aftersale/detail', { id: state.id });
  }

  // 获得快递物流列表
  async function getExpressList() {
    const { code, data } = await DeliveryApi.getDeliveryExpressList();
    if (code !== 0) {
      return;
    }
    state.expresses = data;
  }

  onLoad((options) => {
    if (!options.id) {
      sheep.$helper.toast(`缺少订单信息，请检查`);
      return;
    }
    state.id = options.id;
    // 获得快递物流列表
    getExpressList();
  });
</script>
<style lang="scss" scoped>
  .apply-return {
    padding: 20rpx 30rpx 70rpx 30rpx;
  }

  .apply-return .list {
    background-color: #fff;
    margin-top: 18rpx;
    padding: 0 24rpx 70rpx 24rpx;
  }

  .apply-return .list .item {
    min-height: 90rpx;
    border-bottom: 1rpx solid #eee;
    font-size: 30rpx;
    color: #333;
  }

  .apply-return .list .item .num {
    color: #282828;
    margin-left: 27rpx;
    // width: 227rpx;
    // text-align: right;
  }

  .apply-return .list .item .num .picker .reason {
    width: 385rpx;
  }

  .apply-return .list .item .num .picker .iconfont {
    color: #666;
    font-size: 30rpx;
    margin-top: 2rpx;
  }

  .apply-return .list .item.textarea {
    padding: 24rpx 0;
  }

  .apply-return .list .item textarea {
    height: 100rpx;
    font-size: 30rpx;
  }

  .apply-return .list .item .placeholder {
    color: #bbb;
  }

  .apply-return .list .item .title {
    height: 95rpx;
    width: 100%;
  }

  .apply-return .list .item .title .tip {
    font-size: 30rpx;
    color: #bbb;
  }

  .apply-return .list .item .upload {
    padding-bottom: 36rpx;
  }

  .apply-return .list .item .upload .pictrue {
    border-radius: 14rpx;
    margin: 22rpx 23rpx 0 0;
    width: 156rpx;
    height: 156rpx;
    position: relative;
    font-size: 24rpx;
    color: #bbb;
  }

  .apply-return .list .item .upload .pictrue:nth-of-type(4n) {
    margin-right: 0;
  }

  .apply-return .list .item .upload .pictrue image {
    width: 100%;
    height: 100%;
    border-radius: 14rpx;
  }

  .apply-return .list .item .upload .pictrue .icon-guanbi1 {
    position: absolute;
    font-size: 45rpx;
    top: -10rpx;
    right: -10rpx;
  }

  .apply-return .list .item .upload .pictrue .icon-icon25201 {
    color: #bfbfbf;
    font-size: 50rpx;
  }

  .apply-return .list .item .upload .pictrue:nth-last-child(1) {
    border: 1rpx solid #ddd;
    box-sizing: border-box;
  }

  .apply-return .returnBnt {
    font-size: 32rpx;
    color: #fff;
    width: 100%;
    height: 86rpx;
    border-radius: 50rpx;
    text-align: center;
    line-height: 86rpx;
    margin: 43rpx auto;
  }
</style>
